<template>
    <div>

  <!-- header区域 -->
  <header class="category-header wrap">
      <i class="iconfont icon-left" @click="gohome"></i>
      <div class="header-search">
          <i class="iconfont icon-search"></i>
          <span class="search-title" to="./search">家电返厂同价11.11</span>
      </div>
      <i class="iconfont icon-More"></i>
  </header>

 <section class="category-wrap" ref="categoryWrap">
      <!-- 左侧分类导航 -->
      <div class="nav-side-wrapper" ref="sidewrapper">
        <ul class="nav-side">
          <li
            :class="{ active: selectItem === index }"
            v-for="(item, index) in categoryList"
            :key="index"
            @click="selectMenu(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <!-- 右侧商品数据 -->
      <div class="content-wrapper" ref="contentwrapper">
        <div class="content-slide">
          <img
            :src="contentData.mainImgUrl"
            class="category-main-img"
          />
          <div class="category-list" v-for="(item, index) in contentData.list" :key="index">
            <p class="catogory-title">{{item.title}}</p>
            <div class="product-item" v-for="(proItem, idx) in item.productList" :key="idx">
              <img
                :src="proItem.imgUrl"
                class="product-img"
              />
              <p class="product-title">{{ proItem.title}}</p>
            </div>
          </div>
        </div>
      </div>
    </section>


      <!-- 底部tab -->
      <tabBar></tabBar>
    </div>
</template>

<script>
import tabBar from "@/components/tabBar"
import BScroll from "better-scroll";
import { getCategoryData } from '../../api';
    export default {
      data(){
        return {
          categoryList: [],
          selectItem: 0,
          contentData: {},
        }
      },

      components:{
          tabBar
      },
      created() {
        getCategoryData((res) => {
          // console.log(res);
          this.categoryList = res.data;
          if (this.categoryList.length > 0) {
            this.contentData = this.categoryList[0];
          }
          // 数据获取成功后 初始化better-scroll
            this.$nextTick(() => {
                new BScroll(this.$refs.sidewrapper, {})
                new BScroll(this.$refs.contentwrapper, {})
            });
        });
      },
      mounted() {

        // 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
        this.$nextTick(function () {
          this.setWrapperHeight();

          // 兼容手机 浏览器 滚动效果
          let wrapper = document.querySelector(".nav-side-wrapper");
          new BScroll(wrapper);

          new BScroll(this.$refs.contentwrapper);
        });
      },
    methods: {
      gohome() {
        this.$router.push("/");
      },
      // 固定 内容 容器的高度(固定父容器高度)
      setWrapperHeight() {
        let $screenHeight = document.documentElement.clientHeight
        this.$refs.categoryWrap.style.height = $screenHeight - 100 + 'px'
      },
      // 选中 左侧列表选项
     selectMenu(index) {
        this.selectItem = index
        this.contentData = this.categoryList[index]
      }
    },
    }
</script>

<style lang="scss" scoped>
@import '../../common/style/mixin';

 .wrapper{
      height: 100%;
      overflow: hidden;
  }
.category-header {
    position: fixed;
    left: 0;
    top: 0;
    @include fj;
    width: 100%;
    height: 100px;
    line-height: 100px;
    padding: 0 30px;
    @include boxSizing;
    font-size: 30px;
    color: #656771;
    z-index: 10000;
    background-color: #fff;

    &.active {
        background: $red;
    }

    .icon-left {
        font-size: 50px;
        font-weight: bold;
    }

    .header-search {
        display: flex;
        width: 80%;
        height: 40px;
        line-height: 40px;
        margin: 20px 0;
        padding: 10px 0;
        color: #232326;
        background: #F7F7F7;
        @include borderRadius(40px);

        .icon-search {
            padding: 0 20px 0 40px;
            font-size: 34px;
        }

        .search-title {
            font-size: 24px;
            color: #666;
        }
    }

    .icon-More {
        font-size: 40px;
    }
}

//左侧分类样式
.category-wrap {
    @include fj;
    width: 100%;
    height: 600px;
    margin-top: 100px;
    background: #f8f8f8;
    border-top: 1px solid #999;

    .nav-side-wrapper {
        width: 28%;
        height: 100%;
        overflow: hidden;

        .nav-side {
            width: 100%;
            @include boxSizing;
            background: #f8f8f8;

            li {
                width: 100%;
                height: 92px;
                text-align: center;
                line-height: 92px;
                font-size: 28px;

                &.active {
                    color: $red;
                    background: #fff;
                }
            }
        }
    }
    //右侧
        .content-wrapper {
        width: 72%;
        height: 100%;
        overflow: hidden;

        .content-slide {
            width: 100%;
            padding: 0 20px;
            background: #fff;
            @include boxSizing;

            .category-main-img {
                width: 100%;
            }

            .category-list {
                display: flex;
                flex-wrap: wrap;
                flex-shrink: 0;
                width: 100%;

                .catogory-title {
                    width: 100%;
                    font-size: 34px;
                    font-weight: 500;
                    padding: 40px 0;
                }

                .product-item {
                    width: 33.3333%;
                    margin-bottom: 20px;
                    text-align: center;
                    font-size: 30px;

                    img {
                        width: 100%;
                    }
                }
            }
        }
    }
}


</style>